<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Files</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

    <blockquote class="layui-elem-quote" style="margin: 15px 0;">OSS文件列表</blockquote>

    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnExpandAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe668;</i>展开全部
        </button>
        <button id="btnFoldAll" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe66b;</i>折叠全部
        </button>
        <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe625;</i>展开2020
        </button>
        <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe623;</i>折叠2020
        </button>
    </div>

    <input class="layui-input" id="edtSearch" placeholder="输入关键字"
        style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;" />
    <div class="layui-btn-container" style="display: inline-block;">
        <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe615;</i>搜索
        </button>
        <button id="btnClearSearch" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#x1006;</i>清除搜索
        </button>
    </div>
    <div class="layui-btn-container" style="float: right;">
        <button id="btnReload" class="layui-btn layui-btn-sm layui-btn-primary">
            <i class="layui-icon">&#xe666;</i>重载
        </button>
    </div>

    <table id="treeFiles" lay-filter="files"></table>

    <script type="text/html" id="toolbar">
    </script>
    <script type="text/html" id="fileSize">
        <a>{{fileSize(d.size)}}</a>
    </script>

    <script type="text/html" id="lastModified">
        <a>{{renderTime(d.lastModified)}}</a>
    </script>

    <script type="text/html" id="fileStorageClass">
        <a>{{fileStorageClass(d.storageClass)}}</a>
    </script>

    <script type="text/html" id="bar">
        {{# if (d.key != null) { }}
        <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="download">下载</a>
        {{# } else { }}

        {{# } }}
    </script>


    <script src="/layui/layui.js" charset="utf-8"></script>
    <script src="/layui/treeTable.js"></script>
    <script src="/js/jquery.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        function renderTime(date) {
            if (date != null) {
                var dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
                    /\.[\d]{3}Z/,
                    '')
            } else {
                return '';
            }
        }

        function fileSize(size) {
            if (size >= 1024) {
                size /= 1024;
                size = size.toFixed(2);
                if (size >= 1024) {
                    size /= 1024;
                    size = size.toFixed(2);
                    if (size >= 1024) {
                        size /= 1024;
                        size = size.toFixed(2);
                        return size + 'GB';
                    } else {
                        return size + 'MB';
                    }
                } else {
                    return size + 'KB';
                }
            } else {
                return size + 'B';
            }
        }

        function fileStorageClass(storageClass) {
            if (storageClass != null) {
                if (storageClass === 'Standard') {
                    return '标准存储';
                } else if (storageClass === 'Infrequent Access') {
                    return '低频访问';
                } else if (storageClass === 'Archive') {
                    return '归档存储';
                } else if (storageClass === 'Cold Archive') {
                    return '冷归档存储';
                }
            }else {
                return '';
            }
        }

        layui.config({
            base: '/layui/'
        }).use(['layer', 'util', 'treeTable'], function () {
            var treeTable = layui.treeTable;
            var $ = layui.jquery;

            // 渲染树形表格
            var tree = treeTable.render({
                elem: '#treeFiles',
                height: 'full-95',
                url: '/file/files',
                // toolbar: '#toolbar',
                tree: {
                    iconIndex: 0, // 折叠图标显示在第几列
                    isPidData: true, // 是否是id、pid形式数据
                    idName: 'id', // id字段名称
                    pidName: 'parentId', // pid字段名称
                    getIcon: 'ew-tree-icon-style2'
                },
                cols: [
                    [{
                        field: 'name',
                        title: '文件名',
                    }, {
                        field: 'size',
                        title: '大小',
                        templet: '#fileSize',
                        width: 100,
                        sort: true,
                        align: 'center',
                    }, {
                        field: 'storageClass',
                        title: '存储类型',
                        templet: '#fileStorageClass',
                        width: 100,
                        align: 'center',
                    }, {
                        field: 'lastModified',
                        title: '最后更新',
                        sort: true,
                        autoSort: true,
                        width: 200,
                        templet: '#lastModified',
                        align: 'center',
                    }, {
                        fixed: 'right',
                        title: '下载',
                        toolbar: '#bar',
                        width: 100,
                        align: 'center',
                    }]
                ],
            });

            treeTable.on('tool(treeFiles)', function (obj) {
                layer.confirm('请确认是否下载',function (index) {
                    var data = obj.data;
                    var key = data.key;
                    if (key != null) {
                        $.ajax({
                            type: 'GET',
                            url: '/file/file',
                            data: {
                                key: key
                            },
                            dataType: 'json',
                            success: function (data) {
                                window.location.href = data.data;
                            }
                        })
                    }
                    layer.close(index);
                })
            });

            $('#btnExpandAll').click(function () {
                tree.expandAll();
            });

            // 全部折叠
            $('#btnFoldAll').click(function () {
                tree.foldAll();
            });

            // 展开指定
            $('#btnExpand').click(function () {
                tree.expand(2020);
            });

            // 折叠指定
            $('#btnFold').click(function () {
                tree.fold(2020);
            });

            // 搜索
            $('#btnSearch').click(function () {
                var keywords = $('#edtSearch').val();
                if (keywords) {
                    tree.filterData(keywords);
                } else {
                    tree.clearFilter();
                }
            });

            // 清除搜索
            $('#btnClearSearch').click(function () {
                tree.clearFilter();
            });

            // 重载
            $('#btnReload').click(function () {
                tree.reload();
            });
            $('#btnRefresh').click(function () {
                tree.refresh();
            });

        });
    </script>

</body>

</html>